<template>
  <div>
    <el-input v-model="stuNo" placeholder="学号"></el-input>
    <el-input v-model="name" placeholder="姓名"></el-input>
    <el-input v-model="classChapter" placeholder="章节"></el-input>
    <el-input v-model="classAssessment" placeholder="评价"></el-input>
    <el-button @click="search">查询</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="学生姓名" />
      <el-table-column prop="stuNo" label="学号" />
      <el-table-column prop="classChapter" label="章节" />
      <el-table-column prop="classAssessment" label="评价" />
      <el-table-column fixed="right" label="Operations" width="120">
        <template #default>
          <el-button link type="primary" size="small" @click="handleClick"
          >Detail</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {
  User,
  SwitchButton,
  CaretBottom,
  Calendar,
  Search
} from '@element-plus/icons-vue'
import avatar from '@/assets/default.png'
import { ref } from 'vue'
import { searchStudents } from '@/api/teachercheck.js' // 导入你的接口

const stuNo = ref('')
const name = ref('')
const classChapter = ref('')
const classAssessment = ref('')

const handleClick = () => {
  console.log('click')
}

const tableData = ref([]) // 将 tableData 定义为响应式引用

const getStudents = async () => {
  let result = await searchStudents(stuNo.value, name.value, classChapter.value, classAssessment.value) // 调用你的接口
  tableData.value = result.data // 将接口返回的数据存储在 tableData 中
}

const search = () => {
  getStudents() // 在点击查询按钮时获取数据
}

getStudents() // 在组件初始化时获取数据
</script>